import React, { useState } from 'react'
import logo from '@/assets/react.svg'
import {
	MenuFoldOutlined,
	MenuUnfoldOutlined,
	GlobalOutlined,
	NotificationOutlined,
	BellTwoTone,
} from '@ant-design/icons'
import {
	Button,
	Layout,
	Menu,
	theme,
	MenuProps,
	Avatar,
	Space,
	Dropdown,
	Badge,
	Popover,
	Tabs,
	List,
	Pagination,
	Switch,
	ConfigProvider,
} from 'antd'
import type { PaginationProps } from 'antd'
import './App.css'
import { Link, Outlet, useNavigate, useLocation } from 'react-router-dom'
import { useAppSelector } from './store/hooks'
const { Header, Sider, Content, Footer } = Layout

const url =
	'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'

const items: MenuProps['items'] = [
	{
		key: '1',
		label: <Link to={'/user'}>username</Link>,
	},
	{
		key: '2',
		label: <Link to={'/login'}>退出登录</Link>,
	},
]

const items2: MenuProps['items'] = [NotificationOutlined].map((icon, index) => {
	const key = String(index + 1)

	return {
		key: `/`,
		icon: React.createElement(icon),
		label: `subnav ${key}`,

		children: ['home', 'about', 'user', 'test', 'form', 'list'].map((_) => {
			return {
				key: `/${_}`,
				label: _,
			}
		}),
	}
})

const data = [
	{
		title: 'Ant Design Title 1',
	},
	{
		title: 'Ant Design Title 2',
	},
	{
		title: 'Ant Design Title 3',
	},
]

const App: React.FC = () => {
	const [themeChange, setThemeChange] = useState(false)
	const onThemeChange = (e: boolean) => {
		setThemeChange(e)
	}
	type TargetKey = React.MouseEvent | React.KeyboardEvent | string
	const [collapsed, setCollapsed] = useState(false)
	let { pathname } = useLocation()
	console.log(pathname)
	const [defaultOpenKeys] = useState([
		'/',
		pathname == '/' ? '/home' : pathname,
	])
	const {
		token: { colorBgContainer },
	} = theme.useToken()

	const [current, setCurrent] = useState(3)

	const onChange: PaginationProps['onChange'] = (page) => {
		console.log(page)
		setCurrent(page)
	}

	const navigate = useNavigate()
	const handleClick = (e: any) => {
		if (tabItems.findIndex((item) => item.label === e) === -1) {
			if (!(e === '/home')) {
				setTabItems([
					...tabItems,
					{ label: e, key: e, closeable: false },
				])
			}
		}
		setActiveKey(e == '/home' ? '/' : e)
		navigate(e == '/home' ? '/' : e)
	}
	const remove = (targetKey: TargetKey) => {
		const targetIndex = tabItems.findIndex((pane) => pane.key === targetKey)
		const newPanes = tabItems.filter((pane) => pane.key !== targetKey)
		if (newPanes.length && targetKey === activeKey) {
			const { key } =
				newPanes[
					targetIndex === newPanes.length
						? targetIndex - 1
						: targetIndex
				]
			setActiveKey(key)
		}
		setTabItems(newPanes)
	}

	const [tabItems, setTabItems] = useState([
		{ label: 'home', key: '/', closeable: false },
	])
	const [activeKey, setActiveKey] = useState(tabItems[0].key)
	const handleChange = (e: any) => {
		// console.log(e)
		setActiveKey(e)
		navigate(e)
	}
	const onEdit = (targetKey: TargetKey) => {
		if (targetKey === '/') return
		console.log(targetKey)
		const index = tabItems.findIndex((item) => item.key === targetKey)
		const before = tabItems[index - 1].key
		setActiveKey(before)
		remove(targetKey)
		navigate(before)
	}
	const content = (
		<Tabs
			defaultActiveKey='2'
			items={['通知', '消息', '待办'].map((tab, i) => {
				const id = String(i + 1)
				return {
					key: id,
					label: `${tab} (${i})`,
					children: (
						<div>
							<List
								itemLayout='horizontal'
								dataSource={data}
								renderItem={(item, index) => (
									<List.Item>
										<List.Item.Meta
											avatar={
												<Avatar
													src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
												/>
											}
											title={
												<a href='https://ant.design'>
													{item.title}
												</a>
											}
											description='Ant Design, a design language for background applications, is refined by Ant UED Team'
										/>
									</List.Item>
								)}
							/>
							<Pagination
								current={current}
								onChange={onChange}
								total={50}
							/>
						</div>
					),
				}
			})}
		/>
	)
	const { user } = useAppSelector((state) => state.user)
	return (
		<ConfigProvider
			theme={{
				token: {
					colorPrimary: '#00b96b',
					borderRadius: 2,
					wireframe: true,
				},
				algorithm: themeChange
					? theme.darkAlgorithm
					: theme.defaultAlgorithm,
			}}
		>
			<Layout>
				<Sider
					trigger={null}
					collapsible
					collapsed={collapsed}
					style={{
						background: themeChange ? '' : colorBgContainer,
					}}
				>
					<div className='demo-logo-vertical'>
						<Link to={'/home'}>
							<h1>
								{/*  */}
								<img
									src={logo}
									alt='logo'
									height={32}
									width={32}
								/>
								<span className='acss-wehhhl'>管理系统</span>
							</h1>
						</Link>
					</div>
					<Menu
						mode='inline'
						onClick={(e) => handleClick(e.key)}
						defaultOpenKeys={defaultOpenKeys}
						defaultSelectedKeys={defaultOpenKeys}
						items={items2}
					/>
				</Sider>
				<Layout>
					<Header
						style={{
							padding: 0,
							display: 'flex',
							justifyContent: 'space-between',
							background: themeChange ? '' : colorBgContainer,
						}}
					>
						<Button
							type='text'
							icon={
								collapsed ? (
									<MenuUnfoldOutlined />
								) : (
									<MenuFoldOutlined />
								)
							}
							onClick={() => setCollapsed(!collapsed)}
							style={{
								fontSize: '16px',
								width: 64,
								height: 64,
							}}
						/>
						<Space wrap>
							<Switch onChange={onThemeChange} />
						</Space>
						<div>
							<Space wrap>
								<Popover content={content} trigger='click'>
									<Badge count={999}>
										<Button
											type='text'
											icon={<BellTwoTone />}
										/>
									</Badge>
								</Popover>
							</Space>
							<Dropdown menu={{ items }}>
								<Space wrap>
									<Button
										type='text'
										style={{
											fontSize: '16px',
											height: 64,
										}}
									>
										<Avatar size='small' src={url} />
										<span style={{ marginLeft: '10px' }}>
											{user}
										</span>
									</Button>
								</Space>
							</Dropdown>
							<Dropdown menu={{ items }}>
								<Space wrap>
									<Button
										type='text'
										icon={<GlobalOutlined />}
										style={{
											fontSize: '16px',
											width: 64,
											height: 64,
										}}
									/>
								</Space>
							</Dropdown>
						</div>
					</Header>
					<Tabs
						hideAdd
						activeKey={activeKey}
						type='editable-card'
						animated={true}
						items={tabItems}
						onChange={(e) => handleChange(e)}
						onEdit={onEdit}
						style={{ marginBottom: '-24px', padding: '0 16px' }}
					/>
					<Content
						style={{
							margin: '24px 16px',
							overflowY: 'auto',
							display: 'grid',
						}}
					>
						<Outlet />
					</Content>
					<Footer style={{ textAlign: 'center' }}>
						Ant Design ©{new Date().getFullYear()} Created by Ant
						UED
					</Footer>
				</Layout>
			</Layout>
		</ConfigProvider>
	)
}

export default App
